import { Avatar, Space, Toast } from "antd-mobile";
import React from "react";
import { useNavigate } from "react-router-dom";
import MessageIcon from "assets/common_nav_message_black_s.png";
import "./index.scss";
const index = () => {
  const navigate = useNavigate();
  const demoAvatarImages =
    "https://images.unsplash.com/photo-1548532928-b34e3be62fc6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ";
  // 点击头像icon跳转
  const hangleAvatar = () => {
    Toast.show({
      content: "点击头像",
    });
  };
  // 点击消息icon跳转
  const hangleMessage = () => {
    Toast.show({
      content: "点击消息跳转",
    });
  };
  return (
    <div className="header">
      <div className="header-item">
        <Space block wrap>
          {/* 头像 */}
          <Avatar
            onClick={hangleAvatar}
            className="avatar"
            src={demoAvatarImages}
          />
        </Space>
        {/* 消息icon图标 */}
        <Space block wrap>
          <Avatar
            className="avatars"
            src={MessageIcon}
            onClick={hangleMessage}
          />
        </Space>
      </div>
    </div>
  );
};
export default index;
